import React ,{memo} from 'react';
import {NavLink} from 'react-router-dom';
import  "./index.scss";
import {headerLinks} from 'common/local-data.js';
import {Input} from 'antd'
import { SearchOutlined } from '@ant-design/icons'

export default memo( function WYAppHeader() {

    const headerNav =(item,index)=>{
        if(index<3){
            return <NavLink to={item.link} >
                {item.title}
                <i className="sprite_01 icon"></i>
                </NavLink>
        }else{
            return <a href={item.link} >{item.title}</a>
        }
    }

    return (
    <header className='header'>
       {/* <NavLink to='/' className='aa'>发现音乐</NavLink>
       <NavLink to='/mine'>我的音乐</NavLink>
       <NavLink to='/friend'>朋友</NavLink> */}
        <div className='content wrap-v1'>
           
           
            {/* 左边 */}
            <div className='left'>
                {/* logo */}
             <NavLink to='/' className='logo sprite_01'></NavLink>
                {/* 选项 */}
             <div className='select-list'>
                    {headerLinks.map((item,index)=>{
                       return <div key={item.title} className='select-item'>
                        {headerNav(item,index)}
           
                    </div>
                    }
                    )}
                 
             </div>
            </div>


            {/* 右边 */}
            <div className='right'>
                <Input className='search'  placeholder='音乐/视频/电台/用户' prefix={<SearchOutlined />}></Input>
                <div className="center">创作者中心</div>
                <div className='login'>登录</div>
            </div>
        </div>
        <div className='divider'></div>
    </header>
    )
}
)